<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
<base href="${pageContext.request.contextPath}/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>首页 - 光年(Light Year Admin)后台管理系统模板</title>
</head>
  
<body data-logobg="color_8" data-headerbg="color_8" data-sidebarbg="color_8" data-theme="default" >
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <jsp:include page="common.jsp"/>

    <!--页面主要内容-->
    <main class="lyear-layout-content">
      <div class="container-fluid">

        <div class="row">
          <div class="col-sm-6 col-lg-3">
            <div class="card bg-primary">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">今日收入</p>
                  <p class="h3 text-white m-b-0 fa-1-5x">102,125.00</p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-currency-cny fa-1-5x"></i></span> </div>
              </div>
            </div>
          </div>

          <div class="col-sm-6 col-lg-3">
            <div class="card bg-danger">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">用户总数</p>
                  <p class="h3 text-white m-b-0 fa-1-5x">920,000</p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-account fa-1-5x"></i></span> </div>
              </div>
            </div>
          </div>

          <div class="col-sm-6 col-lg-3">
            <div class="card bg-success">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">下载总量</p>
                  <p class="h3 text-white m-b-0 fa-1-5x">34,005,000</p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-arrow-down-bold fa-1-5x"></i></span> </div>
              </div>
            </div>
          </div>

          <div class="col-sm-6 col-lg-3">
            <div class="card bg-purple">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">新增留言</p>
                  <p class="h3 text-white m-b-0 fa-1-5x">153 条</p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-comment-outline fa-1-5x"></i></span> </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">

          <div class="col-lg-12">
            <div class="card" style="width: 100%">
              <div class="card-body">
                <div id="user" style="width: 800px;height:400px;"></div>
                <div id="category" style="width: 600px;height:400px;"></div>
              </div>
            </div>
          </div>



        </div>

      </div>
    </main>
    <!--End 页面主要内容-->
  </div>
</div>

<script src="api/echarts"></script>
<script type="text/javascript">
$(document).ready(function(e) {
  $.ajax({
    url:"api/index/option1",
    type:"GET",
    dataType:"JSON",
    success:function (resp){
      if(resp.code===10000){
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('user'),'macarons');

        // 指定图表的配置项和数据
        var option1 = {
          title: {
            text: '用户小说数'
          },
          tooltip: {},
          legend: {
            data: ['小说数量']
          },
          xAxis: {
            data: resp.data.username,
            axisLabel:{
            }
          },
          yAxis: {},
          grid: {
            containLabel: true // 使柱状图宽度自适应
          },
          series: [
            {
              name: '小说数量',
              type: 'bar',
              data: resp.data.novelcount
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
      }else {
        lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
      }
    }
  })


  $.ajax({
    url:"api/index/option2",
    type:"GET",
    dataType:"JSON",
    success:function (resp){
      if(resp.code===10000){
        var myChart2 = echarts.init(document.getElementById('category'));
        var option2;

        option2 = {
          title: {
            text: '小说类别',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: resp.data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        myChart2.setOption(option2);
      }else {
        lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
      }
    }
  })

});
</script>
</body>
</html>